<template>
  <div class="box">
      <easy-player 
          ref="vVideoPlayerRef" 
          live 
          muted 
          autoplay
          :video-url="playUrl">
      </easy-player>
      <el-row class="mt-3">
          <el-col :span="24" class="button-container">
              <el-button @click="closeHandle">关闭</el-button>
          </el-col>
      </el-row>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  playUrl: {
      type: String,
      required: true,
  },
});

const emit = defineEmits(['close']);

const vVideoPlayerRef = ref(null);

const closeHandle = () => {
  const player = vVideoPlayerRef.value.getVueInstance();
  if (player) {
      player.destroyPlayer();
  }
  emit('close'); // 触发父组件的 close 事件
};
</script>

<style>
.box {
  width: 100%;
  height: 100%;
}
.button-container {
  text-align: right; /* 将按钮对齐到右侧 */
}
</style>
